<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂助手</title>
    <script>
        function isMobile() {
            var _ua = window.navigator.userAgent,
                _isMobile = /(mobile|mobi|wap|iphone)/i.test(_ua),
                _isAndroid = /android/i.test(_ua),
                _isIpad = /(ipad)/i.test(_ua);
            if (_isMobile || _isAndroid || _isIpad) {
                return true;
            } else {
                return false;
            }
        }
        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }
        if (getCookie('type') === null) {
//            未登录
            if (isMobile()) {
                location.pathname = '/mrcourse/login_phone.html';
            } else {
                location.pathname = '/mrcourse/loginIn.html';
            }
        } else if (isMobile() && getCookie('type') === 'student') {
            location.pathname = '/mrcourse/m-index.html';
        }
    </script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel='stylesheet' href='css/index.css'>
    <script>
        if (getCookie("type") === "teacher") {
            document.write('<link rel="stylesheet" href="css/index_tch.css">');
        } else {
            document.write('<link rel="stylesheet" href="css/index_stu.css">');
        }
    </script>
    <link rel="stylesheet" href="css/perinfo.css">
    <link rel="stylesheet" href="css/question.css">
    <link rel="stylesheet" href="css/toast.css">


</head>
<body>
<div style="position: fixed;top: 0;left: 50%;background-color: rgba(50,50,50,.65);z-index: 999;transform: translateX(-50%)">
    <p>测试通常需要两台计算机(或不同浏览器)</p>
    <p>请先选择课堂</p>
</div>
<header id="header">
    <h1>CLASSROOM ASSISTANT</h1>
    <div class="self-info">
        <img src="image/portrait_tch.png" class="portrait">
        <span class="type">Tch</span>
        <span class="name">{name}</span>
        <ul class="hover-box">
            <li>
                <a href="javascript:void(0)" onclick="showProfile()">
                    <img src="image/self.png">
                    <span>个人信息</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" id="logout"><img src="image/logout.png">
                    <span>注销账号</span></a>
            </li>
        </ul>
    </div>
</header>
<nav id="topnavbar">
    <ul>
        <li class="drag-box">
            <div class="nav__title">课堂</div>
            <div class="nav__content drag-box__scene"></div>
            <ul class="drag-box__container">
                <a href="javascript:void(0)" class="drag-box__bottom-bar">+添加课程</a>
            </ul>
        </li>
        <li>
            <div class="nav__title">课堂状态</div>
            <div class="nav__content switcher on" id="course-state">
                <a href="javascript:void(0)" class="switcher__on">开启</a>
                <a href="javascript:void(0)" class="switcher__off">关闭</a>
            </div>
        </li>
        <li>
            <div class="nav__title">视频直播</div>
            <div class="nav__content switcher" id="live-state">
                <a href="javascript:void(0)" class="switcher__on">开启</a>
                <a href="javascript:void(0)" class="switcher__off">关闭</a>
            </div>
        </li>
        <li>
            <div class="nav__title">实时讨论</div>
            <div class="nav__content switcher" id="chat-state">
                <a href="javascript:void(0)" class="switcher__on">开启</a>
                <a href="javascript:void(0)" class="switcher__off">关闭</a>
            </div>
        </li>
    </ul>
</nav>
<section class="main" id="main">
    <div class="page-1" id="page-1">
        <div class="row1">
            <div class="tab-switcher left">
                <ul class="tab-switcher__title" id="left-title">
                    <li class="active">课堂学生</li>
                    <li>签到学生</li>
                </ul>
                <ul class="tab-switcher__content" id="left-content">
                    <li class="active">
                        <ul class="stu-list">
                        </ul>
                    </li>
                    <li>
                        <ul class="stu-list">
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="middle">
                <video class="live-area" poster="image/live_poster_stu.jpg" id="video" autoplay
                       style="width: 70%;height: 100%"></video>
            </div>
            <div class="course-introduce right" id="course-introduce">
                <h1>课程介绍<a href="javascript:void(0)" id="edit-course">修改</a></h1>
                <p id="course-introduce-content"></p>
                <div class="button-group">
                    <div class="button check-in" id="check-in">签到</div>
                </div>
            </div>
        </div>
        <div class="row2">
            <div class="chat-area">
                <div class="arrow-left" id="arrow-left"></div>
                <div class="message-block" id="message-block"></div>
                <div class="arrow-right" id="arrow-right"></div>
            </div>
        </div>
    </div>
    <div id="perinfo_out" style="display: none">
        <div id="perinfo_middle">
            <div id="perinfo_in_up">
                <div id="perinfo_little_name" class="perInfo_little_div">
                    真实姓名：<input type="text" class="perInfo_input" id="perInfo_input_name" value="戴红军"><span
                        id="perInfo_name"></span>
                    <img src="image/perInfoPenlogo.png" onclick="chageName()" class="penLogo">
                </div>

                <div id="perinfo_little_position" class="perInfo_little_div">
                    <span class="twoletter">身</span>份：<span id="perInfo_position"></span>
                </div>

                <div id="perinfo_little_Id" class="perInfo_little_div">
                    <span class="twoletter">账</span>号：<span id="perInfo_ID"></span>
                </div>

                <div id="perinfo_little_password" class="perInfo_little_div">
                    <span class="twoletter">密</span>码：<input type="password" id="perInfo_password"
                                                             class="perInfo_input">
                    <img src="image/perInfoPenlogo.png" onclick="changePassword()" class="penLogo">
                </div>

                <div id="perinfo_little_passwordIdentify" class="perInfo_little_div" style="display: none">
                    确认密码：<input type="password" id="perInfo_passwordIdentify" class="perInfo_input">
                </div>
            </div>
            <div id="perinfo_in_bottom">
                <div class="perInfo_image_1">
                    <div class="perInfo_image_2" style="color: #f97e99">
                        <img id="back_img" class="perInfo_logo" src="image/back.png" onclick="back()">
                        <br>
                        返回首页
                    </div>
                </div>
                <div class="perInfo_image_1">
                    <div class="perInfo_image_2" style="color: #5ccbbb">
                        <img id="right_img" class="perInfo_logo" src="image/right_perInfo.png" onclick=submitPerInfo()>
                        <br>
                        提交修改
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-2 hidden" id="page-2">
        <div class="nav-bar" id="bar" style="z-index: 0">
            <div>公告栏
                <img class="icon" id="icon-1" src="image/bulletin-icon.png" alt="点击添加公告">
            </div>
            <div>课堂问题
                <img class="icon" id="icon-2" style="width: 3rem" src="image/question-icon.png" alt="点击添加问题">
            </div>
            <div>资料库
                <img class="icon" id="icon-3" src="image/material-icon.png" alt="点击添加资料">
            </div>
        </div>
        <div class="warp">
            <div class="left-side list" id="left-side">




            </div>
            <div class="center-side list" id="center-side">




            </div>
            <div class="right-side list" id="right-side">

            </div>
        </div>
    </div>
</section>
<section class="bottom-bar active" id="bottom-bar">
    <div class="bottom-bar__left" id="bottom-bar__left">学生管理 视频直播 课程介绍 实时讨论</div>
    <div class="bottom-bar__right clickable" id="bottom-bar__right">课程问题 课程公告 课程资料</div>
    <div class="send-message" id="send-message">
        <img src="image/icon_moutain.png">
        <a href="javascript:void(0)">发言</a>
    </div>
</section>
<script src="script/module/jquery.js"></script>
<script>

    var state_name = 0, state_password = 0;
    //    计算主体部分高度
    function windownResizeHandler() {
        var list = document.body.childNodes;
        var heightSpecified = window.innerHeight;
        var mainSection = document.getElementById("main");
        for (var i in list) {
            if (list[i].nodeType === 1 && list[i] != mainSection) {
                heightSpecified -= list[i].offsetHeight;
            }
        }
        mainSection.style.height = heightSpecified + "px";
    }
    window.addEventListener("resize", windownResizeHandler)
    windownResizeHandler();

    //点笔logo显示输入框
    function chageName() {
        if (state_name == 0) {
            document.getElementById("perInfo_input_name").style.display = "inline-block";
            document.getElementById("perInfo_name").style.display = "none"
            state_name = 1;
        }
        else if (state_name == 1) {
            document.getElementById("perInfo_input_name").style.display = "none";
            document.getElementById("perInfo_name").style.display = "inline-block"
            state_name = 0
        }

    }
    function changePassword() {
        if (state_password == 0) {
            document.getElementById("perInfo_password").style.display = "inline-block";
            document.getElementById("perInfo_passwordIdentify").style.display = "inline-block"
            document.getElementById("perinfo_little_passwordIdentify").style.display = "block"
            state_password = 1
        }
        else if (state_password == 1) {
            document.getElementById("perInfo_password").style.display = "none";
            document.getElementById("perInfo_passwordIdentify").style.display = "none"
            document.getElementById("perinfo_little_passwordIdentify").style.display = "none"
            state_password = 0
        }

    }
    document.getElementById("perInfo_name").innerHTML = getCookie('name')
    document.getElementById("perInfo_input_name").value = getCookie('name')
    document.getElementById("perInfo_position").innerHTML = getCookie('type')
    document.getElementById('perInfo_ID').innerHTML = getCookie('username')
    //    点击发送 发送数据
    function submitPerInfo() {
//        alert("12312313")
        var name = document.getElementById("perInfo_input_name").value,
            password = document.getElementById("perInfo_password").value,
            password_iden = document.getElementById("perInfo_passwordIdentify").value;
        if (password != password_iden) {
            alert("两次输入密码不同，请重新输入");
            document.getElementById("perInfo_password").value = "";
            document.getElementById("perInfo_passwordIdentify").value = "";
            return;
        }
        if (name == "" && password == "" && password_iden == "") {
            alert("您没有填写任何信息");
            return;
        }
        $.ajax({
            url: "https://guozhuoqiang.top:8443/mrcourse/common/user",
            type: "POST",
            dataType: "json",
            data: {
                "name": name,
                "password": password
            },
            success: function () {
                alert("信息修改成功")
            }
        })

    }
    function back() {
        window.location.pathname = "/mrcourse/index.html";
    }

    function closeMode() {
        var mode = document.getElementsByClassName('mode');
        for (var j = 0; j < mode.length; j++) {
            mode[j].remove();
        }
    }
    function F_Open_dialog() {
        document.getElementById("btn_file").click();
    }
    function showFileDetial() {
        console.log(document.getElementById("btn_file").files[0].name);
        document.getElementById('fileShow').style.display = 'block';
        document.getElementById('file-name').style.display = 'block';
        document.getElementById('fileUnshow').style.display = 'none';
        document.getElementById('file-name').innerText = document.getElementById("btn_file").files[0].name;
    }


    //page-1/page-2切换
    var bottomBarLeftDom = document.getElementById("bottom-bar__left"),
        bottomBarRightDom = document.getElementById("bottom-bar__right"),
        page1Dom = document.getElementById("page-1"),
        page2Dom = document.getElementById("page-2"),
        bottomBarDom = document.getElementById("bottom-bar"),
        profileDom = document.getElementById('perinfo_out');
    bottomBarLeftDom.addEventListener("click", function (e) {
        closeProfile();
        page1Dom.classList.remove("hidden");
        page2Dom.classList.add("hidden");
        bottomBarRightDom.classList.add("clickable");
        bottomBarLeftDom.classList.remove("clickable");
        bottomBarDom.classList.add("active")
        ////////////question页面的js,勿动
        var list_column = document.getElementsByClassName('list');
        var h = window.innerHeight;
        var bar = document.getElementById('bar');
        var header = document.getElementById('header');
        var b_bar = document.getElementById('bottom-bar');
        var _top =document.getElementById('topnavbar');
        var bar_h = bar.offsetHeight;
        var b_bar_h = b_bar.offsetHeight;
        var header_h = header.offsetHeight;
        var h_top = _top.offsetHeight;
        console.log(h , bar_h , header_h , b_bar_h ,h_top)
        for (var i = 0; i < list_column.length; i++) {
            list_column[i].style.height = h - bar_h - header_h - b_bar_h -h_top + 'px';
        }
    });
    bottomBarRightDom.addEventListener("click", function (e) {
        closeProfile();
        page1Dom.classList.add("hidden");
        page2Dom.classList.remove("hidden");
        bottomBarRightDom.classList.remove("clickable");
        bottomBarLeftDom.classList.add("clickable");
        bottomBarDom.classList.remove("active");
        ////////////question页面的js,勿动
        var list_column = document.getElementsByClassName('list');
        var h = window.innerHeight;
        var bar = document.getElementById('bar');
        var header = document.getElementById('header');
        var b_bar = document.getElementById('bottom-bar');
        var _top =document.getElementById('topnavbar');
        var bar_h = bar.offsetHeight;
        var b_bar_h = b_bar.offsetHeight;
        var header_h = header.offsetHeight;
        var h_top = _top.offsetHeight;
        console.log(h , bar_h , header_h , b_bar_h ,h_top)
        for (var i = 0; i < list_column.length; i++) {
            list_column[i].style.height = h - bar_h - header_h - b_bar_h -h_top + 'px';
        }
    });


    //    曲延松的界面
    function showProfile() {
        profileDom.style.display = '';
        page1Dom.classList.add("hidden");
        page2Dom.classList.add("hidden");
    }
    function closeProfile() {
        profileDom.style.display = 'none';
    }

</script>
<script src="script/require.js" data-main="script/index-main"></script>
</body>
</html>